<template>
  <el-dialog :title="title" @close="close" :visible="showAddPlace" width="630px">
  <el-form ref="addForm" :model="form" :rules="rules" label-width="140px">
    <el-form-item label="点位名称:" prop="name">
      <el-input v-model="form.name"
      style="width:396px"
      autocomplete="off" placeholder="请输入"></el-input>
    </el-form-item>
    <el-form-item label="所在区域:" prop="regionId">
      <el-select v-model="form.regionId" style="width:396px" placeholder="请选择">
        <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="所属商圈:" prop="businessId">
      <el-select v-model="form.businessId" placeholder="请选择" style="width:396px">
        <el-option v-for="item in BusinessList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="归属合作商:" prop="ownerId">
      <el-select v-model="form.ownerId" placeholder="请选择" style="width:396px">
        <el-option v-for="item in PartnerList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>
    </el-form-item>
    <!-- 省市区联动 -->
    <el-form-item label="详细地址:">
       <el-cascader :options="addressData"
        style="width:396px"
       :disabled="false" @change="handleAddress"
        v-model="addressSelections"
        placeholder="请选择省市区"></el-cascader>
    </el-form-item>
    <el-form-item prop="textarea">
      <el-input type="textarea" rows="3" show-word-limit maxlength="30" v-model="textarea" autocomplete="off" placeholder="请输入详细地址" style="width:396px"></el-input>
    </el-form-item>
  </el-form>
  <el-row type="flex" justify="center">
      <el-button size="mini" >取 消</el-button>
    <el-button size="mini" type="primary" @click="submit">确 定</el-button>
  </el-row>
</el-dialog>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
import { getToken } from '@/Utils/storage'
import { getAreaList, getBusinessList, getPartnerList, addPlace, placePut } from '@/api/place'
export default {
  props: {
    showAddPlace: Boolean,
    editRow: Object
  },
  data () {
    return {
      form: {
        name: '', // 名称
        addr: '', // 详细地址
        areaCode: null, // 最后一级区域id
        createUserId: getToken() ? JSON.parse(getToken()).userId : '', // 创建人id
        regionId: null, // 所属区域id
        businessId: '', // 所属商圈id
        ownerId: null, // 合作商id
        ownerName: '' // 合作商名称
      },
      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        regionId: [{ required: true, message: '请输入', trigger: 'blur' }],
        businessId: [{ required: true, message: '请输入', trigger: 'blur' }],
        ownerId: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      regionList: [], // 区域列表
      BusinessList: [], // 商圈列表
      PartnerList: [], // 合作商列表
      textarea: '', // 文本域详细地址
      addressData: regionData, // 地址信息
      addressSelections: [], // 省市区
      province: '', // 省
      city: '', // 市
      town: '' // 区
    }
  },
  created () {
    this.getAreaList()
  },
  computed: {
    title () {
      return this.editRow ? '修改点位' : '新增点位'
    }
  },
  methods: {
    // 点击确定
    submit () {
      this.$refs.addForm.validate(async pass => {
        if (pass) {
          try {
            this.getInfo()
            this.editRow
              ? await placePut({ ...this.form })
              : await addPlace({ ...this.form })
            this.$message.success(`${this.editRow ? '编辑 ' : '新增'}点位成功`)
            this.$parent.getNodeList()
            this.close()
          } catch (err) {
            this.$message.error(err.response.data)
          }
        }
      })
    },
    // 修改
    edit () {
      this.$nextTick(() => {
        this.form = this.editRow
        this.textarea = this.editRow.addr
        // this.addressSelections =
        console.log(this.province, this.city, this.town)
        this.$emit('update:showAddPlace', true)
      })
    },
    getInfo () {
      // 根据id获取对应的合作商名称
      const res = this.PartnerList ? this.PartnerList.filter(item => item.id === this.form.ownerId) : ''
      this.form.ownerName = res[0].name
      // 拼接详细地址
      this.form.addr = `${this.province}-${this.city}-${this.town}-${this.textarea}`
    },
    // 获取区域列表 商圈列表 合作商列表
    async getAreaList () {
      const res = await getAreaList({
        pageIndex: 1,
        pageSize: 100000
      })
      this.regionList = res.data.currentPageRecords
      const res1 = await getBusinessList()
      this.BusinessList = res1.data
      const res2 = await getPartnerList({
        pageIndex: 1,
        pageSize: 100000
      })
      this.PartnerList = res2.data.currentPageRecords
    },
    close () {
      this.$emit('update:showAddPlace', false)
      this.$refs.addForm.resetFields()
      this.addressSelections = null
      this.textarea = null
    },
    handleAddress (value) {
      this.form.areaCode = +value.at(-1)
      for (let i = 0; i < this.addressSelections.length; i++) {
        if (i === 0) {
          this.province = CodeToText[this.addressSelections[i]]
        }
        if (i === 1) {
          this.city = CodeToText[this.addressSelections[i]]
        }
        if (i === 2) {
          this.town = CodeToText[this.addressSelections[i]]
        }
      }
    }

  }
}
</script>

<style>

</style>
